<template>
  <div>
    <el-dialog
      v-model="conf.visible"
      title="系统菜单"
      width="60%"
      draggable
      :before-close="hide"
    >
      <el-tree
        v-if="menus.length > 0"
        :data="menus"
        node-key="id"
        :props="props"
        default-expand-all
      >
        <template #default="{ node, data }">
          <span class="tree-node">
            <span :class="data.enable == 0 ? 'label' : 'label text-disabled'"
              ><i :class="data.icon"></i> {{ node.label }}</span
            >
            <span v-if="!data.level_id || data.level_id < 3" class="opts">
              <i class="fa fa-plus-circle" @click="add(data)"></i>
            </span>
            <span class="opts">
              <i class="fa fa-pencil-square" @click="edit(data)"></i>
              <i class="fa fa-minus-square-o" @click="del(data)"></i>
            </span>
          </span>
        </template>
      </el-tree>

      <div v-if="menus.length == 0">
        <el-empty description="无" @click="add(form)"> </el-empty>
      </div>

      <p></p>
      <div class="add-plus" @click="add(form)">
        <i class="fa fa-plus"></i><span>添加根菜单</span>
      </div>

      <p></p>
      <p></p>
    </el-dialog>
    <menuAdd ref="menuAdd" @onsaved="loadMenus"></menuAdd>
    <menuEdit ref="menuEdit" @onsaved="loadMenus"></menuEdit>
    <el-dialog draggable v-model="conf.confirmVisible" title="删除" width="30%">
      <span>确认删除 系统名称:[<span v-text="delForm.name"></span>] 吗?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="conf.confirmVisible = false">取消</el-button>
          <el-button type="primary" @click="onDelete">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import menuAdd from "./system_menu.add.ext.vue";
import menuEdit from "./system_menu.edit.vue";
export default {
  components: {
    menuAdd,
    menuEdit,
  },
  data() {
    return {
      conf: {
        confirmVisible: false,
        visible: false,
      },
      delForm: {},
      form: {},
      props: {
        children: "children",
        label: "name",
      },
      menus: [],
    };
  },
  methods: {
    loadMenus() {
      let that = this;
      this.$theia.http
        .get("/systemmenu/list", this.form)
        .then((res) => {
          that.menus = res;
        })
        .catch((err) => {
          let code = res.response.status;
          let msg = `获取菜单失败(${code})`;
          that.$notify.error({ title: "失败", message: msg, duration: 5000 });
        });
    },
    show(fm) {
      this.conf.visible = true;
      this.form = fm;
      this.form.sys_id = fm.id;
      this.loadMenus();
    },
    add(fm) {
      let nfm = {};
      Object.assign(nfm, this.form);
      Object.assign(nfm, fm);
      this.$refs.menuAdd.show(nfm);
    },
    edit(fm) {
      let nfm = {};
      Object.assign(nfm, this.form);
      Object.assign(nfm, fm);
      this.$refs.menuEdit.show(nfm);
    },
    del(fm) {
      this.delForm = fm;
      this.conf.confirmVisible = true;
    },
    onDelete() {
      let that = this;
      this.$theia.http
        .del("/systemmenu", this.delForm)
        .then((res) => {
          that.$notify.success({title: '成功',message: '系统信息删除成功',duration:5000})
          that.loadMenus();
          that.conf.confirmVisible = false;
        })
        .catch((err) => {
          that.conf.confirmVisible = false;
          let code = res.response.status;
          let msg = `删除菜单失败(${code})`;
          that.$notify.error({ title: "失败", message: msg, duration: 5000 });
        });
    },
  },
};
</script>

<style>
.tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.89rem;
}
.tree-node .label {
  padding-right: 40px;
}
.tree-node span i {
  margin-right: 15px;
  font-size: 1rem;
}
.tree-node span i:hover {
  color: red;
  font-size: 1.2rem;
}
.tree-node .opts {
  display: none;
}
.tree-node:hover .opts,
.el-tree-node__content:hover .opts {
  display: block;
}
.add-plus {
  color: #999;
  cursor: pointer;
}
.add-plus i {
  margin-right: 10px;
}
.text-disabled {
  color: #3333;
}
</style>